<template>
	<diV class="maindodydiv">
		<div class="container">
			<el-divider style="width:100%;margin-top: 20px;margin-left: 10px;float:left;">
			系统占比分析
		</el-divider>
		<div class="view" style="width:100%;height:120px;margin-top: 10px;">
			<div class="view-area" style="width:21%;margin-left:2%;float:left;height: 120px;background: rgb(240, 140, 190);
		border-radius: 10px;">
			<div style="width:30%;height:120px;float:left;">
				<img src="../assets/customer.png" style="width: 50px;
			height: 50px;
			margin-left: 20px;
			margin-top: 35px;float: left;">
			</div>
			<div style="width:68%;height:120px;float:left;">
				<div style="width: 96%;
		height: 50px;
		float: left;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		line-height: 4;color: white;">现有客户</div><div style="width: 96%;
		height: 40px;
		float: left;
		font-size: 18px;
		text-align: center;
		line-height: 3;color: white;">
		{{dataForm.customercount}}</div>
			</div>
			</div>
		<div class="view-area" style="width:21%;margin-left:3.4%;float:left;height: 120px;background: rgb(39, 187, 151);
		border-radius: 10px;">
		<div style="width:30%;height:120px;float:left;">
		
			<img src="../assets/update.png" style="width: 50px;
		height: 50px;
		margin-left: 20px;
		margin-top: 35px;float: left;">
		</div>
		<div style="width:68%;height:120px;float:left;">
			<div style="width: 96%;
		height: 50px;
		float: left;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		line-height: 4;color: white;">现有订单</div><div style="width: 96%;
		height: 40px;
		float: left;
		font-size: 18px;
		text-align: center;
		line-height: 3;color: white;">
		{{dataForm.ordercount}}</div>
		</div>
		</div>
		<div class="view-area" style="width:21%;margin-left:3.4%;float:left;height: 120px;background: rgb(117, 141, 237);
		border-radius: 10px;">
			<div style="width:30%;height:120px;float:left;">
			<img src="../assets/register.png" style="width: 50px;
		height: 50px;
		margin-left: 20px;
		margin-top: 35px;float: left;">
			</div>
			<div style="width:68%;height:120px;float:left;">
			<div style="width: 96%;
		height: 50px;
		float: left;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		line-height: 4;color: white;">现有项目</div><div style="width: 96%;
		height: 40px;
		float: left;
		font-size: 18px;
		text-align: center;
		line-height: 3;color: white;">
		{{dataForm.projectcount}}</div>
			</div>
		</div>
		<div class="view-area" style="width:21%;margin-left:3.4%;float:left;height: 120px;background: rgb(242, 117, 21);
		border-radius: 10px;">
		<div style="width:30%;height:120px;float:left;">
			<img src="../assets/project.png" style="width: 50px;
		height: 50px;
		margin-left: 20px;
		margin-top: 35px;float: left;">
		</div>
		<div style="width:68%;height:120px;float:left;">
			<div style="width: 96%;
		height: 50px;
		float: left;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		line-height: 4;color: white;">现有人员</div><div style="width: 96%;
		height: 40px;
		float: left;
		font-size: 18px;
		text-align: center;
		line-height: 3;color: white;">
		{{dataForm.usercount}}</div>
		</div>
		</div>
		</div>
		<div style="width: 100%; height: 330px;float: left;margin-top: 30px;">
			
			<el-divider style="width:100%;margin-top: 10px;margin-left: 10px;float:left;">
				客户数量月度占比分析
			</el-divider>
			<div id="charts" style="width: 100%; height: 530px;float: left;"></div>
			</div>
		</div>
	</diV>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { User, Lock, Key } from '@element-plus/icons-vue'
import store from '@/store'
import { useLogSubmitApi } from '@/api/sys/index'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import constant from '@/utils/constant'
import * as echarts from 'echarts'
const barChart = ref<HTMLElement>(); 
const myChart1 = ref<any>();
const dataForm = reactive({
	username:"",
	orgId:"",
	tableData: [],
    usercount:20,
    customercount:30,
    projectcount:60,
    ordercount:80,
    currentPage:1,
    pageSize:10,
    totalCount:0,
})
onMounted(() => {
	let data1=localStorage.getItem("data1");
	let data2=localStorage.getItem("data2");
	let data3=localStorage.getItem("data3");
	let data4=localStorage.getItem("data4");
	let data5=localStorage.getItem("data5");
	let data6=localStorage.getItem("data6");
	let data7=localStorage.getItem("data7");
	let data8=localStorage.getItem("data8");
	let data9=localStorage.getItem("data9");
	let data10=localStorage.getItem("data10");
	let data11=localStorage.getItem("data11");
	let data12=localStorage.getItem("data12");
	
	let data13:any=localStorage.getItem("data13");//用户数
	dataForm.usercount=data13;
	let data14:any=localStorage.getItem("data14");//项目数
	dataForm.projectcount=data14;
	let data15:any=localStorage.getItem("data15");//订单数
	dataForm.ordercount=data15;
	let data16:any=localStorage.getItem("data16");//客户数
	dataForm.customercount=data16;
	// dataForm.usercount=data6;
	initChart(data1,data2,data3,data4,data5,data6,data7,data8,data9,data10,data11,data12);

	// getUserContract();
	// getUserRecord();
})    
const initChart=(data1:any,data2:any,data3:any,data4:any,data5:any,data6:any,data7:any,data8:any,data9:any,data10:any,data11:any,data12:any)=>{ 
          let option = {
              tooltip: {
                show:true,
                trigger: "axis",
                axisPointer: {
                  type: "shadow",
                },
              },
              grid: {
                  left: '1.5%',
                  right: '4%',
                  bottom: '3%',
                  top:'5%',
                  containLabel: true
              },
              xAxis: [{
                  type: 'category',
                  data: ['2023-01','2023-02', '2023-03','2023-04', '2023-05','2023-06','2023-07','2023-08','2023-09','2023-10','2023-11','2023-12'],
                  splitLine: {
                      show: false
                  },
                  axisLine: {
                      show: true, //y轴线消失
                      lineStyle: {
                        color: "#324058"
                      },
                  },
                  axisTick: {
                      alignWithLabel: true
                  }
              }],
              yAxis: [{
                  type: 'value',
                  splitLine: {
                      show: true
                  },
                  splitArea: {
                      show: true,
                  },
                  axisLine: {
                      show: true, //y轴线消失
                      lineStyle: {
                        color: "#324058"
                      },
                  },
              }],
              series: [{
            name: '',
            type: 'bar',
            barWidth:50,
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            itemStyle: {
                normal: {
                    // 随机显示
                    //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                  
                    // 定制显示（按顺序）
                    color: function(params:any) { 
                        var colorList = ["#5599EC", "#00EA9C", "#F9CE16", "#FF913F", "#F08CBE","#5599EC", "#00EA9C", "#F9CE16", "#FF913F", "#F08CBE","#5599EC", "#00EA9C", "#F9CE16"]; 
                        return colorList[params.dataIndex] 
                    }
                },
                // 移入当前的柱状图时改变颜色
                emphasis: {
                    color: '#E13170',
                }
            },
            data: [data1,data2,data3,data4,data5,data6,data7,data8,data9,data10,data11,data12],
              }]
          };
		  let main: HTMLElement = document.getElementById("charts") as HTMLElement;
          echarts.init(main).dispose();
          let myChart =echarts.init(main);
          // let myChart = this.$echarts.init(document.getElementById("charts"));
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();
          });
}
</script>
<style scoped>
.layout-container{
	line-height: 2;
	font-size: 15px;
	background-color: white;
}
.maindodydiv {
	width: 100%;
	height: 100%;
	min-height: 1000px;
	background-color: white;
}
html {
    padding: 0 !important;
    overflow: hidden;
    width: 100%;
    background-color: white;
  	background-size:100% 100%;
}

.layout-home h2 {
	margin: 6px 0;
}
</style>
